﻿<html>
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="/content/extjs/builds/ext-core.js"></script>

    
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html, body
        {
            width: 100%;
            height: 100%;
             position:relative; 
        }
    </style>
    <script type="text/javascript" src="wfmodel.js"></script>
    <script type="text/javascript">
        var sampleData = {
            name: '某某流程图',
            nodes: [
			{ ID: '1', name: '开始节点', type: 'Start', position: { x: 11, y: 11} },
			{ ID: '2', name: '人工处理', type: 'Handle', position: { x: 305, y: 450} },
			{ ID: '3', name: '人工处理', type: 'Handle', position: { x: 35, y: 670} },
			{ ID: '4', name: '条件分支', type: 'XORSplit', position: { x: 311, y: 111} },
			{ ID: '5', name: '人工处理', type: 'Handle', position: { x: 600, y: 330} },
			{ ID: '6', name: '人工处理', type: 'Handle', position: { x: 110, y: 37} },
			{ ID: '7', name: '结束节点', type: 'Finish', position: { x: 66, y: 88} }
		],
            Lines: [
			{ from: '1', to: '2', middlePoint: { x: 11, y: 11} },
			{ from: '2', to: '3', middlePoint: { x: 11, y: 11} },
			{ from: '2', to: '4', middlePoint: { x: 11, y: 11} },
			{ from: '3', to: '4', middlePoint: { x: 11, y: 11} },
			{ from: '5', to: '6', middlePoint: { x: 11, y: 11} },
			{ from: '5', to: '7', middlePoint: { x: 11, y: 11} },
            { from: '4', to: '5', middlePoint: { x: 11, y: 11} }
		]
        };

        window.onload = function () {
            new WFGraph({ id: "myCanvas", data: sampleData });
        }
    </script>
</head>
<body style="overflow:scroll;">
    <div style=" position:absolute; top:100px; left:200px; width:500px; height:400px">
        <div style="width:100%;height:100%;padding:0px;margin:auto; overflow:scroll; ">
            <canvas id="myCanvas" height="1000px" width="1000px">您的浏览器不支持 HTML5 Canvas。</canvas>
        </div>
    </div>
</body>
</html>
